<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/swiper.selfwrite.css">
	 <script src="js/jquery-1.11.3.min.js"></script>
	 <script src="js/swiper.animate1.0.3.min.js"></script>
	 <script src="js/swiper.min.js"></script>
 	 <script src="js/zepto.min.js"></script>
	 
</head>
<body>
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	        <div class="swiper-slide">
	        	<div class="ani report11">1 1</div>
	        	<div class="ani report12">1 2</div>
	        	<div class="ani report13">1 3</div>
	        </div>
	        <div class="swiper-slide">
	        	<div class="ani report21">2 1</div>
	        	<div class="ani report22">2 2</div>
	        	<div class="ani report23">2 3</div>
	        </div>
	        <div class="swiper-slide">
	        	<div class="ani report31">3 1</div>
	        	<div class="ani report32">3 2</div>
	        	<div class="ani report33">3 3</div>
	        </div>
	    </div>
    </div>
   
   <script>        
		  var mySwiper = new Swiper ('.swiper-container', {
			    direction: 'vertical',
			    loop: false,
			    on:{
				      init: function(){
				        swiperAnimateCache(this); //隐藏动画元素 
				        swiperAnimate(this); //初始化完成开始动画
				      }, 
				      slideChangeTransitionEnd: function(){ 
				        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
				      } 
				    }
			  })        
  </script>
</body>
</html>